<template>
	<view class="content"
		style="height: 100vh;"
		:style="'background: url('+ c_imgPath + 'shouye/indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">
		<view class="user_logo">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
			<!-- <view @click="changeimg()">
				<image v-if="userdata.headimg" :src="userdata.headimg" mode="aspectFill"></image>
				<image v-else :src=" z_imgPath + 'user/headimg.png'"></image>
			</view> -->
			<image :src="c_imgPath + 'mine/logo_b.png'"></image>
			<view>设置头像</view>
			<!-- <view>{{userdata.nickname}}</view> -->
		</view>
		<view class="nicheng_tit">设置昵称</view>
		<view
			class="info_input"
			:style="'background: url('+ c_imgPath + 'mine/userInfoInput_bg.png'+ ') repeat-y 0 0 / 100% 100%;'">
			<input class="nicheng_ipt" type="nickname" v-model="nickname" placeholder="请输入您的昵称" @blur="getnickname" />
		</view>
		<view class="btn_b" 
			@click="setdata()"
			:style="'background: url('+ c_imgPath + 'mine/change_btn.png'+ ') repeat-y 0 0 / 100% 100%;'">
			<text>确认修改</text>
			<!-- <image :src="z_imgPath + 'mine/change_btn.png'" mode="widthFix" @click="setdata()"></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				z_imgPath: this.$z_img,
				c_imgPath: 'https://qt.yhemall.com/',
				avatarUrl: uni.getStorageSync('userinfo').headimg,
				nickname: uni.getStorageSync('userinfo').nickname,
				haedimg_status: false
			}
		},
		onLoad() {

		},
		methods: {
			getnickname(e) {
				this.nickname = e.detail.value
				console.log(e, this.nickname)
			},
			
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				this.haedimg_status = true
			},
			
			setdata() {
				let that = this;
				console.log(that.avatarUrl)
				if (that.haedimg_status) {
					uni.uploadFile({
						url: that.siteBaseUrl + 'picture',
						filePath: that.avatarUrl,
						name: 'file',
						success(e) {
							let res = JSON.parse(e.data)
							if (res.status == 1) {
								that.req({
									url: 'update_userinfo',
									data: {
										nickname: that.nickname,
										headimg: res.data.path
									},
									success(ress) {
										if (ress.status == 1) {
											uni.showToast({
												title: '修改成功',
												icon: 'success',
												success() {
													setTimeout(() => {
														uni.navigateBack({
															delta:1
														})
													}, 1000)
												}
											})
										}
									}
								});
							}
						}
					})
			
				} else {
					that.req({
						url: 'update_userinfo',
						data: {
							nickname: that.nickname,
							headimg: that.avatarUrl
						},
						success(ress) {
							if (ress.status == 1) {
								uni.showToast({
									title: '修改成功',
									icon: 'success',
									success() {
										setTimeout(() => {
											uni.navigateBack({
												delta:1
											})
										}, 1000)
									}
								})
							}
						}
					});
				}
			
			
			},

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background: #09081C;
	}

	.user_logo {
		/* background-color: #000000; */
		padding: 80rpx 0 60rpx 0;
		text-align: center;
	}

	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		height: 160rpx;
	}

	.user_logo>.avatar-wrapper {
		width: 160rpx;
		height: 160rpx;
		margin: auto;
		border-radius: 160rpx;
		overflow: hidden;
		border: 1px solid #B07CDD;
	}

	.user_logo>.avatar-wrapper>image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 160rpx;
		overflow: hidden;
	}

	.user_logo>image {
		width: 44rpx;
		height: 44rpx;
		position: relative;
		bottom: 30rpx;
		left: 35rpx;
	}

	.user_logo>view:nth-of-type(1) {
		font-size: 25rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.user_logo>view:nth-of-type(3) {
		font-size: 22rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 20rpx;
	}

	.nicheng_tit {
		font-size: 32rpx;
		font-weight: 400;
		color: #999999;
		padding: 0 36rpx;
		margin-top: 70rpx;
	}

	.nicheng_ipt {
		width: 690rpx;
		height: 88rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 0 36rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFF;
		border-radius: 9rpx;
		margin-top: 22rpx;
	}
	.info_input{
		margin:0 36rpx ;
	}
	.btn_b>image {
		width: 360rpx;
		height: 78rpx;
	}

	.btn_b {
		width: 360rpx;
		height: 78rpx;
		margin: auto;
		/* background: linear-gradient(90deg, #FF8A17 0%, #FFD800 100%); */
		font-size: 32rpx;
		/* font-weight: 600; */
		color: #000000;
		text-align: center;
		line-height: 80rpx;
		margin-top: 140rpx;
		text{
			background: linear-gradient(0deg, #B75AFF 0%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
</style>
